<template>

  <div class="view">
    <v-mousemenu v-show=false></v-mousemenu>
    <v-header @changeWarp="changeWarp"></v-header>

    <!--查看全局页面部分-->
    <div class="watch">
      <div class="watchBox">
        <div class="conten">
          <el-tree :data="viewData" :props="defaultProps" @node-click="nodeClick"></el-tree>
        </div>
      </div>

    </div>


    <!--手机视图部分-->
    <div class="phone">
      <div class="phoneBox" @click="mouseMenu">
        <!--首页-->
        <div v-show="icontit[0] === checkFage" class="phonebg">
          <div class="title" :style="{color:titcolor}">{{title}}</div>
          <div class="conten">
            <!--轮播图-->
            <div class="scorl">
              <template>
                <div class="block">
                  <el-carousel
                    height="150px"
                    :autoplay="value2"
                    arrow="never"
                    :height="scolHight"
                    :interval="scrolTime"
                  >
                    <el-carousel-item v-for="item in scorlList.length">
                      <img :src="scorlList[item-1].url" alt="" :height="scolHight" width="100%">
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </template>
            </div>
            <!--热门推荐-->
            <div class="recommend">
              <el-button type="text">热门推荐</el-button>
              <div class="border-1px"></div>
              <div class="goods-wrap">
                <template v-for="item in Number(goodsNum)">
                  <div class="goods clearfix">
                    <div class="goods-item">
                      <img :src="goodsUrl[item-1].url" alt="" width=70 height=70>
                      <div class="goods-dec">
                        <div class="goodsTitle">{{goodsTitle[item-1]}}</div>
                        <div class="price_wrap">
                          <div class="goodsPrice">{{goodsPrice[item-1]}}元</div>
                          <div class="buy" @click="goDetail(item-1)">购买</div>
                        </div>

                      </div>
                    </div>
                  </div>
                  <div class="border-1px"></div>
                </template>
              </div>


            </div>

            <div class="footer">
              <div class="foot-item" v-for="n in Number(iconNum) ">
                <div class="foot-img">
                  <img :src="iconUrl[n-1]">
                </div>
                <div class="foot-txt" :style="{color:footColor}">{{icontit[n-1]}}</div>

              </div>
            </div>
          </div>
        </div>
        <!--分类-->
        <div v-show="icontit[1] === checkFage" class="phonebg cl">
          <div class="title" :style="{color:titcolor}">{{title2}}</div>
          <div class="conten">
            <!--循环列表部分-->
            <div class="contentBox">
              <div class="listContent" v-for="item in listData">
                <div class="photo">
                  <img :src="item.photoUrl" width=100 height=100>
                </div>
                <div class="content" >
                  <div class="conTitle">
                    {{item.title}}
                  </div>
                  <div class="conAdd">
                    <a>发货地： {{item.add}}</a>
                  </div>
                  <div class="conPrice">
                    <a>{{item.price}}元</a>
                  </div>
                  <div class="conSale">
                    <a>销量：{{item.sale}}</a>
                  </div>
                </div>
              </div>
            </div>

            <div class="footer">
              <div class="foot-item" v-for="n in Number(iconNum) ">
                <div class="foot-img">
                  <img :src="iconUrl[n-1]">
                  <!--<img src="../common/image/icon_home.png" alt="">-->
                </div>
                <div class="foot-txt" :style="{color:footColor}">{{icontit[n-1]}}</div>

              </div>
            </div>
          </div>
        </div>
        <!--我的-->
        <div v-show="icontit[2] === checkFage" class="phonebg My">
          <div class="title" :style="{color:titcolor}">{{title3}}</div>
          <div class="conten">
            <div class="my-wrap">
              <div class="user">
                <div class="avater">
                  <img src="../common/image/fr.jpg" alt="头像" width="50px" height="50px" style="border-radius: 50%">
                </div>
                <div class="user-info">
                  <div class="userinfo-nickname">昵称</div>
                  <div class="edit">个人中心</div>
                </div>
              </div>
              <div class="user-list">
                <div class="list-item">
                  <div class="item-icon ">
                    <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="myiconSuccess">
                      <img v-if="myiconUrl" :src="myiconUrl" class="myicon" width=20 height=20>
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </div>
                  <div class="item-txt">{{mylistTit[0]}}</div>
                </div>
                <div class="list-item">
                  <div class="item-icon">
                    <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="myiconSuccess1">
                      <img v-if="myiconUrl1" :src="myiconUrl1" class="myicon" width=20 height=20>
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </div>
                  <div class="item-txt">{{mylistTit[1]}}</div>
                </div>
                <div class="list-item">
                  <div class="item-icon ">
                    <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="myiconSuccess2">
                      <img v-if="myiconUrl2" :src="myiconUrl2" class="myicon" width=20 height=20>
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </div>
                  <div class="item-txt">{{mylistTit[2]}}</div>
                </div>
                <div class="list-item">
                  <div class="item-icon ">
                    <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="myiconSuccess3">
                      <img v-if="myiconUrl3" :src="myiconUrl3" class="myicon" width=20 height=20>
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </div>
                  <div class="item-txt">{{mylistTit[3]}}</div>
                </div>
              </div>
            </div>

            <div class="footer">
              <div class="foot-item" v-for="n in Number(iconNum) ">
                <div class="foot-img">
                  <img :src="iconUrl[n-1]">
                  <!--<img src="../common/image/icon_home.png" alt="">-->
                </div>
                <div class="foot-txt" :style="{color:footColor}">{{icontit[n-1]}}</div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!--编辑部分-->
    <div class="edit">
      <div class="editBox">
        <div v-show="icontit[0] === checkFage" class="conten">
          <template>
            <!--编辑-->
            <el-button class="title" size="small" type="text">{{title}}</el-button>
            <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
              <el-tab-pane label="编辑" name="first" class="edit-tiem">
                <el-button class="wjtit" size="small" type="primary">标题</el-button>
                <div class="import">
                  <div class="txt">内容：</div>
                  <el-input class="inputwj" size="mini" v-model="title" placeholder="请输入内容"></el-input>
                </div>
                <div class="import">
                  <div class="txt">颜色：</div>
                  <el-input class="inputwj" size="mini" v-model="titcolor" placeholder="请输入颜色"></el-input>
                </div>

                <el-button class="wjtit" size="small" type="primary">底部栏</el-button>
                <!-- 隐藏个数-->
                <!--<div class="import">-->
                <!--<div class="txt">个数：</div>-->
                <!--<el-input @blur="inputNb" class="inputwj" size="mini" v-model="iconNum"-->
                <!--placeholder="请输入数字"></el-input>-->
                <!--</div>-->
                <div class="import" v-for="n in Number(iconNum)" :index="n" style="margin-left: 10px">
                  <div class="txt">内容{{n}}：</div>
                  <el-input @blur="inputview" @change="inputChange" class="inputwj" size="mini" :name="n.toString()"
                            v-model="icontit[n-1]"
                            placeholder="请输入标题"></el-input>
                </div>
                <div class="import">
                  <div class="txt">颜色：</div>
                  <el-input class="inputwj" size="mini" v-model="footColor" placeholder="请输入颜色"></el-input>

                </div>

                <div class="import">
                  <div class="txt">上传：</div>
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :data="urldata"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="success"
                    :file-list="fileList"
                    :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器
                    </el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                </div>
              </el-tab-pane>

              <!--外观-->
              <el-tab-pane label="外观" name="second" class="edit-tiem">
                <el-button class="wjtit" size="small" type="primary">轮播图</el-button>
                <div class="import">
                  <div class="txt">自动轮播：</div>
                  <el-switch
                    v-model="value2"
                    on-color="#13ce66"
                    off-color="#ff4949">
                  </el-switch>
                </div>
                <div class="import">
                  <div class="txt">高度：</div>
                  <el-input class="inputwj" size="mini" v-model="scolHight" placeholder="请输入高度"></el-input>
                </div>
                <div class="import">
                  <div class="txt">时间：</div>
                  <el-input class="inputwj" size="mini" v-model="scrolTime" placeholder="请输入切换时间"></el-input>
                </div>
                <div class="import">
                  <div class="txt">上传：</div>
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :data="urldata"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="scrolsuccess"
                    :file-list="scorlList"
                    :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器
                    </el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                </div>

                <el-button class="wjtit" size="small" type="primary">热门推荐</el-button>
                <div class="import">
                  <div class="txt">商品个数：</div>
                  <el-input @change="getGoods" class="inputwj" size="mini" v-model="goodsNum"
                            placeholder="请输入数字"></el-input>
                </div>
                <template v-for="index in Number(goodsNum)">
                  <div class="import">
                    <div class="txt">商品名称{{index}}：</div>
                    <el-input class="inputwj" size="mini" v-model="goodsTitle[index-1]" placeholder="请输入文字"></el-input>
                  </div>
                  <div class="import">
                    <div class="txt">商品价格{{index}}：</div>
                    <el-input class="inputwj" size="mini" v-model="goodsPrice[index-1]" placeholder="请输入价格"></el-input>
                  </div>
                </template>
                <div class="import">
                  <div class="txt">图片上传：</div>
                  <el-upload
                    class="upload-demo"
                    ref="goodsupload"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :data="urldata"
                    :on-remove="goodsRemove"
                    :on-success="goodssuccess"
                    :file-list="goodsUrl"
                    :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="goodsUpload">上传到服务器
                    </el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                </div>
              </el-tab-pane>

              <!--动画-->
              <el-tab-pane label="动画" name="third">动画</el-tab-pane>
              <!--时件-->
              <el-tab-pane label="事件" name="fourth">事件</el-tab-pane>
            </el-tabs>
          </template>
        </div>
        <div v-show="icontit[1] === checkFage" class="conten cl">
          <template>
            <!--编辑-->
            <el-button class="title" size="small" type="text">{{title2}}</el-button>
            <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
              <el-tab-pane label="编辑" name="first" class="edit-tiem">
                <!--商品列表修改部分-->
                <el-button class="wjtit" size="small" type="primary">商品列表</el-button>
                <table class="listTable">
                  <tr class="listTh">
                    <th>名称</th>
                    <th>地址</th>
                    <th>价格</th>
                    <th>销量</th>
                    <th>操作</th>
                  </tr>
                  <tr class="listTr" v-for="(item,index) in listData">
                    <td>
                      <el-input class="inputwj inputtd" size="mini" :value="item.title" v-model="listData[index].title"></el-input>
                    </td>
                    <td>
                      <el-input class="inputwj inputtd" size="mini" :value="item.add" v-model="listData[index].add"></el-input>
                    </td>
                    <td>
                      <el-input class="inputwj inputtd" size="mini" :value="item.price" v-model="listData[index].price"></el-input>
                    </td>
                    <td>
                      <el-input class="inputwj inputtd" size="mini" :value="item.sale" v-model="listData[index].sale"></el-input>
                    </td>
                    <td>
                      <button class="" v-on:click="delList(index)" >删除</button>
                    </td>
                  </tr>
                  <!--<tr>-->
                  <!--<td  colspan="5">-->
                  <!--<button class="" v-on:click="updateList">修改</button>-->
                  <!--</td>-->
                  <!--</tr>-->
                </table>

                <!--增加商品部分-->
                <el-button class="wjtit" size="small" type="primary">添加商品</el-button>
                <div class="import">
                  <div class="txt">名称：</div>
                  <el-input class="inputwj" size="mini" v-model="listTitle" placeholder="请输入名称"></el-input>
                </div>
                <div class="import">
                  <div class="txt">地址：</div>
                  <el-input class="inputwj" size="mini" v-model="listAdd" placeholder="请输入内容"></el-input>
                </div>
                <div class="import">
                  <div class="txt">价格：</div>
                  <el-input class="inputwj" size="mini" v-model="listPrice" placeholder="请输入颜色"></el-input>
                </div>
                <div class="import">
                  <div class="txt">销量：</div>
                  <el-input class="inputwj" size="mini" v-model="listSale" placeholder="请输入颜色"></el-input>
                </div>
                <div class="import">
                  <div class="txt">URL ：</div>
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-success="climgsuccess"
                    :file-list="listphotoURL">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                </div>
                <div class="import importR">
                  <el-button slot="trigger" size="small" type="danger">重置信息</el-button>
                  <el-button slot="trigger" size="small" type="success" class="btnPut" v-on:click="addList">提交信息</el-button>
                </div>
              </el-tab-pane>

              <!--外观-->
              <el-tab-pane label="外观" name="second" class="edit-tiem">

              </el-tab-pane>

              <!--动画-->
              <el-tab-pane label="动画" name="third">动画</el-tab-pane>
              <!--时件-->
              <el-tab-pane label="事件" name="fourth">事件</el-tab-pane>
            </el-tabs>
          </template>
        </div>
        <div v-show="icontit[2] === checkFage" class="conten">
          <template>
            <!--编辑-->
            <el-button class="title" size="small" type="text">{{title3}}</el-button>
            <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
              <el-tab-pane label="编辑" name="first" class="edit-tiem">
                <el-button class="wjtit" size="small" type="primary">列表</el-button>
                <div class="import">
                  <div class="txt">列表1：</div>
                  <el-input class="inputwj" size="mini" v-model="mylistTit[0]" placeholder="请输入内容"></el-input>
                </div>
                <div class="import">
                  <div class="txt">列表2：</div>
                  <el-input class="inputwj" size="mini" v-model="mylistTit[1]" placeholder="请输入内容"></el-input>
                </div>
                <div class="import">
                  <div class="txt">列表3：</div>
                  <el-input class="inputwj" size="mini" v-model="mylistTit[2]" placeholder="请输入内容"></el-input>
                </div>
                <div class="import">
                  <div class="txt">列表4：</div>
                  <el-input class="inputwj" size="mini" v-model="mylistTit[3]" placeholder="请输入内容"></el-input>
                </div>
              </el-tab-pane>
              <!--外观-->
              <el-tab-pane label="外观" name="second" class="edit-tiem">

              </el-tab-pane>

              <!--动画-->
              <el-tab-pane label="动画" name="third">动画</el-tab-pane>
              <!--时件-->
              <el-tab-pane label="事件" name="fourth">事件</el-tab-pane>
            </el-tabs>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue';
  import axios from 'axios'
  import header from '../components/header.vue'
  import mousemenu from '../components/mousemenu.vue'
  export default {
    data() {
      return {
        menuShow: false,
        title: "首页",
        title2: "分类",
        title3: "我的",
        activeName2: 'first',
        titcolor: '#fff',
        iconNum: 3,
        footColor: '#8E8F90',
        icontit: ['首页', '分类', '我的'],
        iconUrl: [require('../common/image/icon_home.png'), require('../common/image/icon_cart.png'), require('../common/image/icon_cate.png'), require('../common/image/icon_member.png')],
        fileList: [{
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }, {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }],
        value2: true,
        urldata: {
          xm: "jj",
          xn: "ff"
        },
        scolHight: "150px",
        scrolTime: 3000,
        scorlList: [{
          name: 'food.jpeg',
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494310431641&di=c0e571030fba2d12e60fdc2c21dce9a7&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F18%2F48%2F39%2F5627da3404f6d_1024.jpg'
        }, {
          name: 'food2.jpeg',
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494310471824&di=0c4b429652335338f7f225ec0fe2f83f&imgtype=0&src=http%3A%2F%2Fimg10.3lian.com%2Fc1%2Fnewpic%2F08%2F01%2F01.jpg'
        }],
        viewData: [{
          label: '首页',
          children: [{
            label: '详情',
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        checkFage: "首页",
        goodsPrice: [2799.0, 6699.0, 9999.0, 9999.0],
        goodsUrl: [{
          name: 'ph6.jpg',
          url: require('../common/image/ph6.jpg')
        }, {
          name: 'ph7',
          url: 'https://m.360buyimg.com/mobilecms/s357x357_jfs/t4276/257/2416766721/125228/ba72a107/58d1d078N20e18b62.jpg!q50.jpg'
        }, {
          name: 'ph7',
          url: 'https://m.360buyimg.com/mobilecms/s357x357_jfs/t4447/85/3966199403/83175/ebf6b616/5907f763N84b0f884.jpg!q50.jpg'
        }, {
          name: 'ph7',
          url: 'https://m.360buyimg.com/mobilecms/s357x357_jfs/t4447/85/3966199403/83175/ebf6b616/5907f763N84b0f884.jpg!q50.jpg'
        }],
        goodsTitle: ['Apple iPhone 6 32G 金色 移动联通电信4G手机', 'Apple iPhone 7 Plus 128G 红色特别版 移动联通电信4G手机', '锤子 锤子新品手机，5月9日19:00京东直播锤子新品发布会，敬请期待', '锤子 锤子新品手机，5月9日19:00京东直播锤子新品发布会，敬请期待'],
        goodsNum: 3,
        mylistTit:['全部订单','待付款','待收货','关于我们'],
        myiconUrl:'',
        myiconUrl1:'',
        myiconUrl2:'',
        myiconUrl3:'',

        listData:[
          {
            title: 'Apple iPhone 6 32G 金色 移动联通电信4G手机',
            add  : '北京',
            price: 2799,
            sale : '130',
            photoUrl : '/static/img/ph6.3f822a1.jpg'
          }, {
            title: 'Apple iPhone 7 Plus 128G 红色特别版 移动联通电信4G手机',
            add  : '北京',
            price: 6699,
            sale : '199',
            photoUrl : 'https://m.360buyimg.com/mobilecms/s357x357_jfs/t4276/257/2416766721/125228/ba72a107/58d1d078N20e18b62.jpg!q50.jpg'
          }
        ],
        listTitle: '',
        listAdd: '',
        listPrice: '',
        listSale: '',
        listphotoURL: []



      }
    },
    created(){
      this.viewData = []
      this.$nextTick(() => {
        for (var i = 0; i < this.icontit.length; i++) {
          this.viewData.push({
            label: this.icontit[i]
          })
        };
        document.oncontextmenu=function(){
          return false;
        }
      });

    },
    methods: {
// 首页
      handleClick(tab, event) {
      },
      submitUpload() {
        debugger
        this.$refs.upload.submit();
      },
      handleRemove (file, fileList) {
        for (var i = 0; i < this.scorlList.length; i++) {
          if (this.scorlList[i].name === file.name) {
            this.scorlList.splice(i, 1);
            break;
          }
        }
        console.log(file, fileList);
      },
      handlePreview (file) {
        console.log(file);
      },
      success (response, file, fileList) {
        console.log(response)
      },
      scrolsuccess(response, file, scorlList) {
        debugger
        if (this.scorlList[0].name === 'food.jpeg') {
          this.scorlList = []
        }
        this.scorlList.push({
          name: file.name,
          url: file.url
        })
//        console.log(JSON.stringify(this.scorlList) + "scorlList")
      },
      // goods
      goodsUpload() {
        debugger
        this.$refs.goodsupload.submit();
      },
      goodsRemove(file, fileList) {

      },
      goodssuccess(response, file, goodsUrl) {
        this.goodsUrl.unshift({
          name: file.name,
          url: file.url
        })
        console.log(this.goodsUrl)
      },
      // 编辑台控制底部图标的内容事件
      inputview(e) {
        let inputIndex = Number(e.target.name)
        this.viewData[inputIndex - 1].label = e.target.value;
      },
      inputChange(e) {
        this.checkFage = e
      },
      // 编辑台控制底部图标的个数事件
      inputNb(e) {
        let numb = Number(e.target.value);
        this.viewData = [];
        for (var i = 0; i < numb; i++) {
          this.viewData.push({
            label: this.icontit[i]
          })
        }
      },
      // 获得watch部分被选择的元素方法
      nodeClick(e, a, b) {
        this.checkFage = e.label
      },
      getGoods(e) {
        let getgoodNub = Number(e)
        console.log(getgoodNub)
      },
// 分类
      //添加列表数据
      addList (){
        //alert(this.listphotoURL[this.listphotoURL.length-1].url);
        var listurl = '';
        if(this.listphotoURL.length == 0) {
          listurl = 'https://m.360buyimg.com/mobilecms/s357x357_jfs/t4276/257/2416766721/125228/ba72a107/58d1d078N20e18b62.jpg!q50.jpg';
        } else {
          listurl = this.listphotoURL[this.listphotoURL.length-1].url
        }
        this.listData.push({
          title: this.listTitle,
          add: this.listAdd,
          price: this.listPrice,
          sale: this.listSale,
          photoUrl: listurl
        });
      },

      delList (num){
        this.listData.splice(num,1);
      },
      climgsuccess: function (response, file, scorlList) {
        debugger
        this.listphotoURL = [];
        this.listphotoURL.push({
          name: file.name,
          url: file.url
        })
        console.log(this.listphotoURL)

      },

// 我的
      myiconSuccess(res, file) {
        debugger
        console.log(res)
        this.myiconUrl = URL.createObjectURL(file.raw);
      },
      myiconSuccess1(res, file) {
        this.myiconUrl1 = URL.createObjectURL(file.raw);
      },
      myiconSuccess2(res, file) {
        this.myiconUrl2 = URL.createObjectURL(file.raw);
      },
      myiconSuccess3(res, file) {
        this.myiconUrl3 = URL.createObjectURL(file.raw);
      },
      changeWarp () {
        var objectWx = {
          page1:{},
          page2:{},
          page3:{}
        };
        objectWx.page1.title = this.title;
        objectWx.page1.icontit = this.icontit;
        objectWx.page1.titcolor = this.titcolor;
        objectWx.page1.value2 = this.value2;
        objectWx.page1.scrolTime = this.scrolTime;
        objectWx.page1.scorlList = this.scorlList;
        objectWx.page1.goodsPrice = this.goodsPrice;
        objectWx.page1.goodsUrl = this.goodsUrl;
        objectWx.page1.goodsTitle = this.goodsTitle;
        objectWx.page1.goodsNum = this.goodsNum;
        objectWx.page2.title = this.title2;
        objectWx.page2.listData = this.listData;
        objectWx.page3.title = this.title3;
        objectWx.page3.mylistTit = this.mylistTit;
        objectWx.page3.myiconUrl = this.myiconUrl;
        objectWx.page3.myiconUrl1 = this.myiconUrl1;
        objectWx.page3.myiconUrl2 = this.myiconUrl2;
        objectWx.page3.myiconUrl3 = this.myiconUrl3;

        let jsonObjectWx = JSON.stringify(objectWx);
        /*axios({
          method: 'http://192.168.31.114:8080/tp5/public/index/index/getPage',
          url: '/user/12345',
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          data: {
            jsonObjectWx: jsonObjectWx,
          }
        }).then(function (response) {
          console.log(response +"sueess");
        })
          .catch(function (error) {
            console.log(error + "erro");
          })*/

        axios.post('http://192.168.31.157:8080/tp5/public/index/index/getPage', {
          jsonObjectWx: jsonObjectWx,
        })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });

        console.log(objectWx);
      },
      goDetail(index) {

      },
      mouseMenu() {
        debugger;
        this.menuShow = true;
      }

    },
    components: {
      'v-header': header,
      'v-mousemenu': mousemenu
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @import "../common/css/index.less";
  .view {
    width: 100%;
    display: flex;
    .watch {
      width: 25%;
      position: relative;
      .watchBox {
        position: fixed;
        width: 25%;
        left: 0;
        top: 50px;
        height: 100%;
        overflow-y: scroll;

        .conten {
          width: 100%;
          .watch-list {
            width: 187.5px;
            height: 33.5px;
          }
        }
      }
    }

    .phone {
      width: 50%;
      border-left: 2px solid #ddd;
      border-right: 2px solid #ddd;
      .phoneBox {
        position: fixed;
        width: 50%;
        right: 25%;
        top: 50px;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;

      }
      .phonebg {
        background: url("../common/image/phone.svg");
        background-size: 380px auto;
        background-repeat: no-repeat;
        width: 380px;
        height: 800px;
        margin: 30px auto;
        position: relative;
        .title {
          height: 44px;
          width: 100%;
          line-height: 44px;
          text-align: center;
          position: absolute;
          color: #fff;
          top: 70px;
          left: 0;
        }
        .conten {
          width: 375px;
          height: 564px;
          position: absolute;
          top: 113px;
          left: 2.5px;
          .scorl {
          }
          .recommend {
            .goods-wrap {
              height: 300px;
              overflow: auto;
              .goods {
                .goods-item {
                  display: flex;
                  padding: 10px 10px;
                  .goods-dec {
                    display: flex;
                    width: 75%;
                    flex-direction: column;
                    justify-content: space-around;
                    margin-left: 10px;
                    font-size: 14px;
                    .price_wrap {
                      display: flex;
                      justify-content: space-between;
                      color: #f23030;
                    }
                  }

                }
              }
            }

          }
          .footer {
            height: 48px;
            width: 100%;
            position: absolute;
            bottom: -1px;
            background-color: #F7F7FA;
            left: 0;
            z-index: 100;
            display: flex;
            .foot-item {
              flex: 1;
              .foot-txt {
                color: #8E8F90;
                text-align: center;
                font-size: 12px;
                margin: 5px 0;
              }
              .foot-img {
                width: 30px;
                height: 30px;
                margin: 0 auto;
                img {
                  width: 30px;
                  height: 30px;
                }
              }
            }

          }
        }
      }
      .My.phonebg {
        .conten {
          .my-wrap {
            .user {
              width: 100%;
              background: #ffffff;
              padding: 15px 0px 15px 0;
              margin: 7.5px 0 0 0;
              border-top: 1px solid #eee;
              border-bottom: 1px solid #dcdcdc;
              box-shadow: 0 2px 5px #eeeeee;
              display: flex;
              .avater {
                flex-grow: 1;
                text-align: center;
              }
              .user-info {
                flex: 5;
                text-align: left;
                .userinfo-nickname {
                  padding: 4px 0 5px 0;
                  font-size: 15px;
                  color: #818A8F;
                }
                .edit {
                  font-size: 15px;
                  color: #bababa;
                  line-height: 17px;

                }

              }
            }
            .user-list {
              margin: 15px 0 0 0;
              border-top: solid 1px #f3f5f7;
              .list-item {
                width: 100%;
                background: #ffffff;
                padding: 0;
                display: flex;
                text-align: center;
                color: #6d6d6d;
                line-height: 20px;
                font-size: 14px;
                border-bottom:solid 1px #f3f5f7;
                padding: 10px 0;
                .item-icon {
                  font-size: 20px;
                  flex: 1;
                  .avatar-uploader .el-upload {
                    border: 1px dashed #d9d9d9;
                    border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                  }
                  .avatar-uploader .el-upload:hover {
                    border-color: #20a0ff;
                  }
                  .avatar-uploader-icon {
                    font-size: 12px;
                    color: #8c939d;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                  }
                  .myicon {
                    width: 20px;
                    height: 20px;
                    display: block;
                  }
                }
                .item-txt {
                  flex: 5;
                  text-align: left;

                }

              }
            }
          }
        }
      }
      .cl.phonebg {
        .conten {
          .contentBox{
            height:516px;;
            position:absolute;
            overflow:auto;
            float:left;
            .listTh{
              width: 99.5%;
              height: 35px;
              border-bottom: 1px solid #ccc;
              float:left;
              margin-left:0.5%;
              float:left;
              .listTitle{
                width: 92.5px;
                height: 35px;
                line-height:35px;
                text-align: center;
                float: left;
              }
            }
            .listContent{
              width: 99.5%;
              height: 110px;
              //background:red;
              float:left;
              margin-left:0.5%;
              margin-bottom:4px;
              .photo{
                height:100px;
                width:100px;
                //background:pink;
                float:left;
                margin-left:5px;
                margin-top:5px;
              }
              .content{
                width:263px;
                height:109px;
                border-bottom:1px solid #ccc;
                //background:brown;
                float:left;
                .conTitle{
                  height:40px;
                  width:240px;
                  line-height:20px;
                  background:white;
                  float:left;
                  margin-top:10px;
                  margin-left:10px;
                  word-wrap:break-word;
                }
                .conAdd, .conExpress, .conPrice, .conSale{
                  height:20px;
                  width:80px;
                  float:left;
                  margin-left:10px;
                  background:white;
                  margin-top:5px;
                  text-align:center;
                  a{
                    font-size:10px;
                  }
                }
                .conAdd{
                  width:180px;
                  text-align:left;
                  padding-left:24px;
                }
                .conPrice, .conSale{
                  margin-top:10px;
                }
                .conSale{
                  a{
                    line-height:18px;
                  }
                }
                .conPrice{
                  a{
                    color:red;
                    font-size:18px;
                  }
                }
              }
            }
          }

        }
      }
    }

    .edit {
      width: 25%;
      overflow: hidden;
      .editBox {
        position: fixed;
        width: 25%;
        right: 0;
        top: 50px;
        height: 80%;
        overflow-x: hidden;
        overflow-y: auto;
        .conten {
          padding: 20px;
          .title {
            width: 100%;
            font-size: 15px;
            margin-bottom: 20px;
          }
          .edit-tiem {
            .wjtit {
              width: 100%;
              margin-top: 20px;
            }
            .import {
              margin-top: 20px;
              display: flex;
              font-size: 14px;

              .inputwj {
                width: auto;
              }
              .txt {
                color: #1f2d3d;
                line-height: 22px;
              }
            }
          }
        }
        .conten.cl {
          .listTable{
            width: 100%;
            overflow-x: auto;
            font-size: 12px;
            float:left;
            margin-top:10px;
            border: 1px solid #ccc;
            border-radius:5px;
            tr{

              height:30px;
              line-height:30px;
              text-align:center;
              th{
                border:1px solid #ccc;
              }
              td{
                border:1px solid #ccc;
                text-align:center;
                input{
                  width:50px;
                  height:20px;
                  margin-left:4px;
                }
                button{
                  background:#eee;
                  border-radius:5px;
                  color:#666;
                }
              }
            }
          }
          .importR {
            display: flex;
            justify-content: space-around;
          }
        }
      }

    }

  }
</style>
